<template>
  <v-app-bar app color="primary" dense dark>
    <div class="d-flex align-center">
      <v-img
        alt="QSDnde Logo"
        class="shrink mr-2"
        contain
        src="../assets/logo.png"
        transition="scale-transition"
        width="40"
      />
      <span alt="QSDnd name" class="logo-name shrink mt-1 hidden-sm-and-down">QSDnde</span>
    </div>

    <v-spacer></v-spacer>

    <v-btn target="_blank" text>
      <v-icon>mdi-access-point</v-icon>
    </v-btn>
    <v-menu left bottom>
      <template v-slot:activator="{ on, attrs }">
        <v-btn icon v-bind="attrs" v-on="on">
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </template>

      <v-list>
        <v-list-item v-for="n in moreMenu" :key="n.id" @click="() => {}">
          <v-list-item-title>{{ n.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </v-app-bar>
</template>

<script>
export default {
  name: "AppBar",
  data: () => ({
    moreMenu: [
      { title: "获取源码", id: 1 },
      { title: "关于QSDnde", id: 2 },
    ],
  }),
};
</script>

<style>
</style>